<!DOCTYPE html>
<html lang="en">
<head>
	<title>Vue</title>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>
<div id="hh">
	<p v-cloak v-html="userinfo" v-bind:title="mytitle"></p>
</div>

<div id="list">
	<ul>
		<li v-for="a in lists">
			{{a.content}}
		</li>
	</ul>
</div>

<div>
	<form action="http://localhost:8080/import" method="post" enctype="multipart/form-data">
		<input type="file" name="user_excel">
		<input type="submit" value="提交">
	</form>
</div>

<a href="http://localhost:8080/export"><button>导出excel</button></a>

<div id="app1">
	<p>{{message}}</p>
	<button v-on:click="reverseMessage">反转消息</button>
</div>

<script type="text/javascript">
	var hh = new Vue({
		el: "#hh",
		data: {
			msg: 'hello world',
			userinfo: "<h1>hekun</h1>",
			mytitle: "现在的时间为："+new Date().toLocaleString()
		}
	});

	var list = new Vue({
		el: "#list",
		data: {
			lists: [
				{content: "study in action"},
				{content: "java"},
				{content: "c++"}
			]
		}
	});

	var app1 = new Vue({
		el: "#app1",
		data: {
			message: "Hello Vue.js"
		},
		methods: {
			reverseMessage: function(){
				this.message = this.message.split(" ").reverse().join(" ");
			}
		}
	});
</script>
</body>
</html>